<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                    @select="handleSelect">
                    <el-menu-item index="0">LOGO</el-menu-item>
                    <div class="flex-grow" />
                    <el-menu-item index="1">index</el-menu-item>
                    <el-menu-item index="2" @click="goMySelf">my-self</el-menu-item>
                    <el-menu-item index="3" @click="goLogout">logout</el-menu-item>
                </el-menu>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" @click="clickMenu" :collapse="isCollapse"
                        @open="handleOpen">
                        <el-menu-item index="1">
                            <el-icon>
                                <document />
                            </el-icon>
                            <template #title>student</template>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <el-icon>
                                <document />
                            </el-icon>
                            <template #title>teacher</template>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <student v-if="type=='admin'"/>
                   <teacher v-if="type=='teacher'"/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import My from '../components/My.vue'
import Teacher from '../components/teacher.vue'
import { ElMenu, ElRadio, ElTable, ElMessage, ElMessageBox } from 'element-plus'
import { ref, computed, onMounted } from 'vue'
import Student from '../components/student.vue'
import { useRouter } from 'vue-router'
import { getLogout } from '../API/ApiMethod'
components: {
    ElMenu,
        ElRadio,
        ElTable,
        Student,
        Teacher,
        My,
        ElMessage,
        ElMessageBox
}
onMounted(() => {
    // ElMessage({
    //     type:'success',
    //     message:'修改成功'
    // })
})
let defaultActive=ref("1")
const router = useRouter()
let isShowStudent = ref(true)
let isShowTeacher = ref(false)
const activeIndex = ref('1')
let isCollapse = ref(false)
let allIndex = ref(1)
function handleSelect() {

}
let type=sessionStorage.getItem('type')
if(type=='admin'){
    defaultActive="1"
}else if(type=='teacher'){
    defaultActive="2"
}
function handleOpen(index) {
    console.log(index)
    if(type=='admin'&&index==2){
        ElMessage({
            message:'你没有权限查看老师信息',
            type:'error'
        })
    }else if(type=='teacher'&&index==1){
        ElMessage({
            message:'你没有权限查看学生页面',
            type:'error'
        })
    }

    allIndex.value = index
}
function goMySelf() {
    router.push({
        name: 'my'
    })
}

function clickMenu() {
    isCollapse.value = !isCollapse.value
}

const goLogout = () => {
    ElMessageBox.confirm(
        '你确定要退出吗',
        'warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    ).then(() => {
        getLogout().then(res => {
            console.log(res)
            if (res.code == 10000) {
                let token = sessionStorage.getItem('token')
                if (token != null) {
                    sessionStorage.removeItem('token')
                    router.push({
                        name: 'login'
                    })
                    ElMessage({
                        message: '退出成功',
                        type: 'success'
                    })
                } else {
                    ElMessage({
                        message: '退出失败',
                        type: 'error'
                    })
                }
            }
        }).catch(err => {
            ElMessage({
                type: 'error',
                message: '退出失败'
            })
            throw err
        })

    })


}

</script>

<style>

</style>